<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>研究生招生系统 - 监督管理页面</title>
    {% load static %}
    <link rel="stylesheet" href="{% static 'css/styles.css' %}">
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css' %}">
    <script src="{% static 'plugins/bootstrap-5.3.0-alpha1-dist/js/bootstrap.bundle.min.js' %}"></script>
</head>
<body>
{% if error_msg %}
    <div class="alert alert-danger" role="alert">
        {{ error_msg }}
    </div>
{% endif %}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
        <a class="navbar-brand" href="#">
            <img src="{% static 'img/bjfu.png' %}" alt="Bootstrap" width="252" height="61">
        </a>
        <h3 class="navbar-text ms-auto">北京林业大学研究生招生系统 - 监督管理页面</h3>
    </div>
</nav>


<div class="container-fluid">
    <div class="row">
        <!-- 侧边导航栏 -->
        <div class="col-md-2 d-none d-md-block">
            <div class="sidebar">
                <nav>
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a class="nav-link text-green" href="#" data-section="subjects" id="subjects-tab">学科信息</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-green" href="#" data-section="students" id="students-tab">考生信息</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-green" href="#" data-section="scores" id="scores-tab">考生初试信息</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-green" href="#" data-section="interviews" id="interviews-tab">考生复试信息</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-green" href="#" data-section="supervisors" id="supervisors-tab">导师信息</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#" data-section="admissions">招生信息</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-green" href="#" data-section="stutea" id="stutea-table-tab">师生双向选择信息</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
        <!-- 主内容区域 -->
        <div class="col-md-9">
            <div class="tab-content" id="myTabContent">
                <div class="tab-pane fade show active" id="subjects" role="tabpanel" aria-labelledby="subjects-tab">
                    <h2>学科信息</h2>
                    <div class="card">
                        <div class="card-body">
                            <table class="table table-striped table-bordered">
                                <thead>
                                    <tr>
                                        <th>科目ID</th>
                                        <th>科目名称</th>
                                        <th>科目级别</th>
                                        <th>父科目</th>
                                        <th>科目概述</th>
                                        <th>科目类型</th>
                                    </tr>
                                </thead>
                                <tbody id="subjects-table-body">
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                 <div class="tab-pane fade" id="students" role="tabpanel" aria-labelledby="students-tab">
                        <h2>考生信息</h2>
                        <div class="card">
                            <div class="card-body">
                                <table class="table table-striped table-bordered">
                                    <thead>
                                        <tr>
                                            <th>学号</th>
                                            <th>姓名</th>
                                            <th>考号</th>
                                            <th>生源地</th>
                                            <th>本科专业</th>
                                            <th>本科学校</th>
                                            <th>邮箱</th>
                                            <th>电话</th>
                                        </tr>
                                    </thead>
                                    <tbody id="students-table-body">
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                <div class="tab-pane fade" id="scores" role="tabpanel" aria-labelledby="scores-tab">
                        <h2>考生初试信息</h2>
                        <div class="card">
                            <div class="card-body">
                                <table class="table table-striped table-bordered">
                                    <thead>
                                        <tr>
                                            <th>考号</th>
                                            <th>姓名</th>
                                            <th>英语</th>
                                            <th>数学</th>
                                            <th>专业课</th>
                                            <th>政治</th>
                                        </tr>
                                    </thead>
                                    <tbody id="scores-table-body">
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane fade" id="interviews" role="tabpanel" aria-labelledby="interviews-tab">
                        <h2>考生复试信息</h2>
                        <div class="card">
                            <div class="card-body">
                                <table class="table table-striped table-bordered">
                                    <thead>
                                        <tr>
                                            <th>考号</th>
                                            <th>姓名</th>
                                            <th>英语复试</th>
                                            <th>专业知识复试</th>
                                            <th>综合素质复试</th>
                                        </tr>
                                    </thead>
                                    <tbody id="interviews-table-body">
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                <div class="tab-pane fade" id="supervisors" role="tabpanel" aria-labelledby="supervisors-tab">
                        <h2>导师信息</h2>
                        <div class="card">
                            <div class="card-body">
                                <table class="table table-striped table-bordered">
                                    <thead>
                                        <tr>
                                            <th>导师ID</th>
                                            <th>姓名</th>
                                            <th>简介</th>
                                            <th>邮箱</th>
                                            <th>电话</th>
                                            <th>教授学科</th>
                                            <th>导师类型</th>
                                            <th>导师职称</th>
                                        </tr>
                                    </thead>
                                    <tbody id="supervisors-table-body">
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                <div class="tab-pane fade" id="admissions" role="tabpanel" aria-labelledby="admissions-tab">
                    <h2>招生信息</h2>
                    <div class="d-flex justify-content-between mb-3">
                    </div>
                    <div class="card">
                        <div class="card-body">
                            <table class="table table-striped table-bordered">
                                <thead>
                                    <tr>
                                        <th>科目ID</th>
                                        <th>方向</th>
                                        <th>初试学科</th>
                                        <th>复试学科</th>
                                        <th>年度招生计划</th>
                                        <th>额外招生计划</th>
                                        <th>招生年份</th>
                                        <th>是否有招生资格</th>
                                        <th>导师ID</th>
                                    </tr>
                                </thead>
                                <tbody id="admissions-table-body">
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <div class="tab-pane fade" id="stutea" role="tabpanel" aria-labelledby="stutea-tab">
                    <h2>师生双向选择信息</h2>
                    <div class="card">
                        <div class="card-body">
                            <table class="table table-striped table-bordered" id="stutea-table">
                                <thead>
                                    <tr>
                                        <th>考号</th>
                                        <th>导师ID</th>
                                        <th>当前意向</th>
                                        <th>状态</th>
                                    </tr>
                                </thead>
                                <tbody id="stutea-table-body">
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>


            </div>
        </div>
    </div>
</div>
<script>
            const sections = document.querySelectorAll('.tab-pane');
        const links = document.querySelectorAll('.nav-link');

        links.forEach(link => {
            link.addEventListener('click', (e) => {
                e.preventDefault();
                const sectionId = link.getAttribute('data-section');
                sections.forEach(section => {
                    if (section.id === sectionId) {
                        section.classList.add('show', 'active');
                    } else {
                        section.classList.remove('show', 'active');
                    }
                });
            });
        });

        // 初始化页面加载时显示学科信息
        const subjectsTab = document.getElementById('subjects-tab');
        subjectsTab.click();

        // 加载学科信息
        fetch('http://127.0.0.1:8000/sub')
            .then(response => response.json())
            .then(data => {
                const subjectsTableBody = document.getElementById('subjects-table-body');
                subjectsTableBody.innerHTML = '';
                data.subjects_info.forEach(subject => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${subject.subject_id}</td>
                        <td>${subject.subject_name}</td>
                        <td>${subject.subject_level}</td>
                        <td>${subject.parent_subject}</td>
                        <td>${subject.subject_overview}</td>
                        <td>${subject.subject_type}</td>
                    `;
                    subjectsTableBody.appendChild(row);
                });
            })
            .catch(error => console.error('Error:', error));

        // 加载考生信息
        fetch('http://127.0.0.1:8000/stu')
            .then(response => response.json())
            .then(data => {
                const studentsTableBody = document.getElementById('students-table-body');
                studentsTableBody.innerHTML = '';
                data.students_info.forEach(student => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${student.idnumber}</td>
                        <td>${student.name}</td>
                        <td>${student.examnumber}</td>
                        <td>${student.origin}</td>
                        <td>${student.undergradmajor}</td>
                        <td>${student.undergradschool}</td>
                        <td>${student.email}</td>
                        <td>${student.phone}</td>
                    `;
                    studentsTableBody.appendChild(row);
                });
            })
            .catch(error => console.error('Error:', error));

        // 加载考生初试信息
        fetch('http://127.0.0.1:8000/fir')
            .then(response => response.json())
            .then(data => {
                const scoresTableBody = document.getElementById('scores-table-body');
                scoresTableBody.innerHTML = '';
                data.firstscores_info.forEach(score => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${score.examnumber}</td>
                        <td>${score.name}</td>
                        <td>${score.englishscore}</td>
                        <td>${score.mathscore}</td>
                        <td>${score.majorscore}</td>
                        <td>${score.politicalscore}</td>
                    `;
                    scoresTableBody.appendChild(row);
                });
            })
            .catch(error => console.error('Error:', error));

        // 加载导师信息
        fetch('http://127.0.0.1:8000/tea')
            .then(response => response.json())
            .then(data => {
                const supervisorsTableBody = document.getElementById('supervisors-table-body');
                supervisorsTableBody.innerHTML = '';
                data.teachers_info.forEach(teacher => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${teacher.instructorid}</td>
                        <td>${teacher.instructorname}</td>
                        <td>${teacher.instructorbio}</td>
                        <td>${teacher.instructoremail}</td>
                        <td>${teacher.instructorphone}</td>
                        <td>${teacher.instructorsubject}</td>
                        <td>${teacher.instructortype}</td>
                        <td>${teacher.instructortitle}</td>
                    `;
                    supervisorsTableBody.appendChild(row);
                });
            })
            .catch(error => console.error('Error:', error));

        // 加载考生复试信息
        fetch('http://127.0.0.1:8000/sec')
            .then(response => response.json())
            .then(data => {
                const interviewsTableBody = document.getElementById('interviews-table-body');
                interviewsTableBody.innerHTML = '';
                data.secondscores_info.forEach(interview => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${interview.examnumber}</td>
                        <td>${interview.name}</td>
                        <td>${interview.englishskills}</td>
                        <td>${interview.majorknowledge}</td>
                        <td>${interview.overallquality}</td>
                    `;
                    interviewsTableBody.appendChild(row);
                });
            })
            .catch(error => console.error('Error:', error));

    fetch('http://127.0.0.1:8000/enro')
    .then(response => response.json())
    .then(data => {
        const admissionsTableBody = document.getElementById('admissions-table-body');
        admissionsTableBody.innerHTML = '';

        data.enrollments_info.forEach(admission => {
            const row = document.createElement('tr');
            row.innerHTML = `
                <td>${admission.subjectid}</td>
                <td>${admission.subjectdirection}</td>
                <td>${admission.subjectexam}</td>
                <td>${admission.subjectretest}</td>
                <td>${admission.annualquota}</td>
                <td>${admission.extraquota}</td>
                <td>${admission.year}</td>
                <td>${admission.eligible}</td>
                <td>${admission.instructorid}</td>

            `;
            admissionsTableBody.appendChild(row);
        });

        const searchInputAdmission = document.getElementById('search-input-admission');
        searchInputAdmission.addEventListener('input', () => {
            const searchTerm = searchInputAdmission.value.toLowerCase();
            const rows = admissionsTableBody.querySelectorAll('tr');
            rows.forEach(row => {
                const subjectDirection = row.querySelector('td:nth-child(2)').textContent.toLowerCase();
                row.style.display = subjectDirection.includes(searchTerm) ? '' : 'none';
            });
        });
    })
    .catch(error => console.error('Error fetching admissions data:', error));
    fetch('http://127.0.0.1:8000/stutea')
    .then(response => response.json())
    .then(data => {
        const stuteaTableBody = document.getElementById('stutea-table-body');
        stuteaTableBody.innerHTML = '';
        data.stuteas_info.forEach(stutea => {
            const row = document.createElement('tr');
            row.innerHTML = `
                <td>${stutea.examnumber}</td>
                <td>${stutea.instructorid}</td>
                <td>${stutea.current_wish}</td>
                <td>${stutea.status}</td>
            `;
            stuteaTableBody.appendChild(row);
        });
    })
    .catch(error => console.error('Error:', error));
</script>
</body>
</html>